<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<script>MathJax = {tex: {inlineMath: [["\\(", "\\)"]]}, svg: {fontCache: "global"}};</script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<script src="./static/mccole.js"></script>
<script>window.onload = () => fixPage()</script>

    <script defer data-domain="stjs.tech" src="https://plausible.io/js/plausible.js"></script>

    <link href="./static/mccole.css" rel="stylesheet" type="text/css">
    <title>Software Design by Example</title>
  </head>
  <body>
    <main>
      <h1>Software Design by Example</h1>
      <h2 class="subtitle">A Tool-Based Introduction with JavaScript</h2>
      <div class="announcement">
  <p>
    <em>Software Design by Example</em>
    is <a href="https://leanpub.com/stjs">available on LeanPub</a>
    <br/>
    (under its old name <em>Software Tools in JavaScript</em>)
  </p>
</div>
<p>The best way to learn design is to study examples [<a href="../bibliography/#Schon1984">Schon1984</a>, <a href="../bibliography/#Petre2016">Petre2016</a>],
and some of the best examples of software design come from
the tools programmers use in their own work.
In these lessons we build small versions of things like file backup systems,
testing frameworks,
regular expression matchers,
and browser layout engines
both to demystify them
and to give some insights into how experienced programmers think.
We draw inspiration from [<a href="../bibliography/#Brown2011">Brown2011</a>, <a href="../bibliography/#Brown2012">Brown2012</a>, <a href="../bibliography/#Brown2016">Brown2016</a>],
<a href="https://maryrosecook.com/">Mary Rose Cook</a>'s <a href="http://gitlet.maryrosecook.com/">Gitlet</a>,
and the books that introduced the Unix philosophy to an entire generation of programmers
[<a href="../bibliography/#Kernighan1979">Kernighan1979</a>, <a href="../bibliography/#Kernighan1981">Kernighan1981</a>, <a href="../bibliography/#Kernighan1983">Kernighan1983</a>, <a href="../bibliography/#Kernighan1988">Kernighan1988</a>].</p>
<p>All of the written material in this project can be freely reused
under the terms of the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons - Attribution license</a>,
while all of the software is made available under the terms of
the <a href="https://firstdonoharm.dev/">Hippocratic License</a>;
see <a class="secref" href="./license/#license">Appendix&nbsp;A</a> for details.</p>
<div class="centered">
  <p>
    <em>All proceeds from this project will go to support the
    <a href="https://www.reddoorshelter.ca/">Red Door Family Shelter</a>.</em>
  </p>
</div>

      <nav>
	<table class="toc">
<tr><td class="toc-index">1</td><td><a href="./introduction/">Introduction</a></td><td>Who you are and where we're going</td></tr>
<tr><td class="toc-index">2</td><td><a href="./systems-programming/">Systems Programming</a></td><td>Using callbacks to manipulate files and directories</td></tr>
<tr><td class="toc-index">3</td><td><a href="./async-programming/">Asynchronous Programming</a></td><td>Using promises to manage delayed computation</td></tr>
<tr><td class="toc-index">4</td><td><a href="./unit-test/">Unit Testing</a></td><td>Testing software piece by piece</td></tr>
<tr><td class="toc-index">5</td><td><a href="./file-backup/">File Backup</a></td><td>Archiving files with directory structure</td></tr>
<tr><td class="toc-index">6</td><td><a href="./data-table/">Data Tables</a></td><td>Storing and manipulating tables efficiently</td></tr>
<tr><td class="toc-index">7</td><td><a href="./pattern-matching/">Pattern Matching</a></td><td>Using patterns to find things in data</td></tr>
<tr><td class="toc-index">8</td><td><a href="./regex-parser/">Parsing Expressions</a></td><td>Turning text into code</td></tr>
<tr><td class="toc-index">9</td><td><a href="./page-templates/">Page Templates</a></td><td>Generating HTML pages from templates</td></tr>
<tr><td class="toc-index">10</td><td><a href="./build-manager/">Build Manager</a></td><td>Updating files that depend on other files</td></tr>
<tr><td class="toc-index">11</td><td><a href="./layout-engine/">Layout Engine</a></td><td>Figuring out what goes where in a web page</td></tr>
<tr><td class="toc-index">12</td><td><a href="./file-interpolator/">File Interpolator</a></td><td>Managing source files that have been broken into pieces</td></tr>
<tr><td class="toc-index">13</td><td><a href="./module-loader/">Module Loader</a></td><td>Loading source files as modules</td></tr>
<tr><td class="toc-index">14</td><td><a href="./style-checker/">Style Checker</a></td><td>Checking that code conforms to style guidelines</td></tr>
<tr><td class="toc-index">15</td><td><a href="./code-generator/">Code Generator</a></td><td>Modifying code to track coverage and execution times</td></tr>
<tr><td class="toc-index">16</td><td><a href="./doc-generator/">Documentation Generator</a></td><td>Generating documentation from comments embedded in code</td></tr>
<tr><td class="toc-index">17</td><td><a href="./module-bundler/">Module Bundler</a></td><td>Turning many files into one</td></tr>
<tr><td class="toc-index">18</td><td><a href="./package-manager/">Package Manager</a></td><td>Getting and installing packages</td></tr>
<tr><td class="toc-index">19</td><td><a href="./virtual-machine/">Virtual Machine</a></td><td>Assembling and running low-level code</td></tr>
<tr><td class="toc-index">20</td><td><a href="./debugger/">Debugger</a></td><td>Running programs under the control of a breakpointing debugger</td></tr>
<tr><td class="toc-index">21</td><td><a href="./conclusion/">Conclusion</a></td><td>Where we have been and where you could go next</td></tr>
<tr><td class="toc-index">A</td><td><a href="./license/">Licensing</a></td><td>---</td></tr>
<tr><td class="toc-index">B</td><td><a href="./bibliography/">Bibliography</a></td><td>---</td></tr>
<tr><td class="toc-index">C</td><td><a href="./conduct/">Code of Conduct</a></td><td>---</td></tr>
<tr><td class="toc-index">D</td><td><a href="./contributing/">Contributing</a></td><td>---</td></tr>
<tr><td class="toc-index">E</td><td><a href="./glossary/">Glossary</a></td><td>---</td></tr>
<tr><td class="toc-index">F</td><td><a href="./links/">Links</a></td><td>---</td></tr>
<tr><td class="toc-index">G</td><td><a href="./authors/">Authors</a></td><td>---</td></tr>
</table>

      </nav>
    </main>
    <footer>
  <hr/>
  <p>
    Copyright © 2022 Greg Wilson
    &nbsp;
    <a href="./license/"><img class="icon" src="./static/cc-by-nc.svg" alt="CC-BY-NC icon"/></a>
    <a href="./license/"><img class="icon" src="./static/hippocratic.svg" alt="Hippocratic License icon"/></a>
    <a href="https://github.com/software-tools-books/stjs/"><img class="icon" src="./static/github.svg" alt="GitHub icon"/></a>
    <a href="mailto:gvwilson@third-bit.com"><img class="icon" src="./static/email.svg" alt="email icon"/></a>
  </p>
</footer>

  </body>
</html>
